<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		  学习主体：针对页面操作比较多 ---DOM操作
		  jQuery操作DOM：理解：jQ框架改变页面内容效果
		  js基础就可以直接学习，了解函数使用
		  基础函数---事件源之后出现，事件源语法糖中
		  html()    作用：增加一个元素，覆盖原有html
		  val()     作用：针对input元素，实现修改文本框内容
		  text()    作用：生成一个文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background-color: #333;
			 }
		 </style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生的一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, consequuntur! Consequatur officiis voluptas rem, repellat quis minima autem adipisci dolorum, ex molestias ullam nulla maxime nihil. Dolore fuga tempore nulla.</p>
		<h3>lorem</h3>
		<div></div>
		<input type="button" value="按钮2" />
		<input type="text" value="文本框2" />
		<script>
			$("button").click(function(){
				/*jQ操作DOM--html()函数使用*/
				$("p").html("<h1>jQ操作DOM-html函数使用</h1>");
			}); 
			/*练习：div 200*200 背景颜色：黑色，鼠标划过之后，
			下面内容改变：<h3>提示，修改为黄色*/
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄色</h3>");
			});
			/*练习：按钮 文本框  点击按钮，文本框增加一行文本*/
			$("input[type='button']").click(function(){
				//alert("jQ选择器");
				$("input[type='text']").val("文本框");
			});
			/*利用jQ操作DOM（页面效果）：①元素内容操作（3个函数）
			                            html()
										val()
										text()
			                           ②元素属性操作（4个函数）
									    <p align="center">
									    attr()
										removeAttr()
										<input checked>
										prop()
									   ③样式类名操作（4个函数）
									    .demo{属性：属性值..}
									    addClass()
										removeClass()
										toggleClass()
										hasClass()
									   ④元素样式操作（5个函数）
									   css()
									   width()和height()
									   outerWidth()和outerHeight()
									   语法：css("css属性","css属性值")
									             display   none/block
									   $("选择器").attr().addClass();
											
									   ⑤插入和删除修改操作（7个函数）
									   append()和prepend()
									   after()和before()
									   remove()和empty()
									   replaceWith()
									   ⑥元素遍历操作（6个函数）
									   ⑦jQ动画操作（7个函数）
			  ①②针对html ③针对css
			*/
		</script>
	</body>
</html>